<template>
  <div class="manage-box">
    <div class="register-box">
      <el-form
          ref="ruleFormRef"
          style="max-width: 600px"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
          class="demo-ruleForm"
          size="default"
          status-icon
      >
        <el-form-item label="员工姓名" prop="user_name">
          <el-input v-model="ruleForm.user_name" />
        </el-form-item>
        <el-form-item label="部门" prop="role">
          <el-select v-model="ruleForm.role" placeholder="请选择部门" style="width: 100%">
            <el-option
                v-for="item in roleOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="电话" prop="tel">
          <el-input v-model="ruleForm.tel" />
        </el-form-item>
        <el-form-item label="住址" prop="address">
          <el-input v-model="ruleForm.address" />
        </el-form-item>
        <el-form-item label="权限" prop="root">
          <el-select v-model="ruleForm.root" placeholder="请选择权限" style="width: 100%">
            <el-option
                v-for="item in rootOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password"/>
        </el-form-item>
        <el-form-item label="确认密码" prop="repassword">
          <el-input v-model="ruleForm.repassword" type="password" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="userRegister(ruleFormRef)"
          >
            提交
          </el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {ElMessage, } from "element-plus";
import {onMounted, reactive, ref} from "vue";
import {getNewUsers, newUser, register} from "@/api/index.js"
import emitter from "@/lib/eventBus"

const roleOptions = [
  {
  label: '总经办',
  value: '1',
  },{
  label: '测绘部外业',
  value: '2',
  },{
  label: '测绘部内业',
  value: '3',
  },{
  label: '技术部',
  value: '4',
  },{
  label: '研发部',
  value: '5',
  },{
  label: '行政部',
  value: '6',
  },{
  label: '设计部',
  value: '7',
  },
]

const rootOptions = [
  {
    label: '部门负责人',
    value: '1',
  },{
    label: '普通员工',
    value: '2',
  },
]

const ruleFormRef = ref()

let ruleForm = reactive({
  user_name:'',
  role:null,
  tel:'',
  address:'',
  root:null,
  password:'',
  repassword:'',
})


const validateRepassword = (rule, value, callback) => {
  if (value !== ruleForm.repassword) {
    callback(new Error('两次密码输入不一致'))
  } else {
    callback()
  }
}

const rules = reactive({
  user_name: [
    { required: true, message: '用户名不能为空', trigger: 'blur' },
  ],
  role:[
    { required: true, message: '部门不能为空', trigger: 'blur' },
  ],
  root:[
    { required: true, message: '权限不能为空', trigger: 'blur' },
  ],
  password:[
    { required: true, message: '密码不能为空', trigger: 'blur' },
  ],
  repassword:[
    { required: true, message: '确认密码不能为空', trigger: 'blur' },
  ],
})


onMounted(()=>{
  emitter.emit('updateManageMenu','/users')
})

//获取用户列表
const getUserList = async ()=>{
  try {
    const {data:res} = await getNewUsers()
    if(res.code !== 200){
      tableData.value = res.data
      return ElMessage({
        message:'获取列表失败',
        type:'error'
      })
    }
    tableData.value = res.data
  } catch (e) {
    console.log(e)
  }
}

const userRegister = async (formEl)=>{
  try {
    const v = await formEl.validate()
    if (v) {
      console.log(ruleForm)
      const {data:res} = await register({
        username:ruleForm.user_name,
        password:ruleForm.password,
        role:ruleForm.role,
        root:ruleForm.root,
        tel:ruleForm.tel,
        address:ruleForm.address,
      })
      //结果判断
      if(res.code === 200){
        ElMessage({
          message:'注册成功!',
          type:'success'
        })
        ruleForm = {
          user_name:'',
          role:null,
          tel:'',
          address:'',
          root:null,
          password:'',
          repassword:'',
        }
      } else if (res.code === 401) {
        ElMessage({
          message:'用户名已存在!',
          type:'info'
        })
        ruleForm = {
          user_name:'',
          role:null,
          tel:'',
          address:'',
          root:null,
          password:'',
          repassword:'',
        }
      } else if (res.code === 400 && res.code === 402) {
        ElMessage({
          message:'注册失败!',
          type:'warning'
        })
        ruleForm = {
          user_name:'',
          role:null,
          tel:'',
          address:'',
          root:null,
          password:'',
          repassword:'',
        }
      }
    } else {
      //数据验证未通过
      ElMessage({
        message:'请填写正确信息!',
        type:'error'
      })
      ruleForm = {
        user_name:'',
        role:null,
        tel:'',
        address:'',
        root:null,
        password:'',
        repassword:'',
      }
    }
  } catch (e) {
    console.log(e)
  }
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}




// 通过申请
const userAllow = async (id)=>{
  if(!localStorage.getItem('syhyDocManSys')){
    router.push('/login')
    return ElMessage({
      message:'请先登录',
      type:'warning'
    })
  }
  let obj = JSON.parse(localStorage.getItem('syhyDocManSys'))
 let data = {
   newUserId : id,
   userId : obj.id,
   suggest : 1
 }
  const {data:res} = await newUser(data)
  if(res.code === 404){
    return ElMessage({
      message:'未查询到该用户',
      type:'error'
    })
  } else if(res.code === 400){
    return ElMessage({
      message:'审批失败',
      type:'error'
    })
  } else if(res.code === 200){
    await getUserList()
    return ElMessage({
      message:'审批成功',
      type:'success'
    })
  }
}
// 拒绝申请
const userReject = async (id)=>{
  if(!localStorage.getItem('syhyDocManSys')){
    router.push('/login')
    return ElMessage({
      message:'请先登录',
      type:'warning'
    })
  }
  let obj = JSON.parse(localStorage.getItem('syhyDocManSys'))
  let data = {
    newUserId : id,
    userId : obj.id,
    suggest : 2
  }
  const {data:res} = await newUser(data)
  if(res.code === 404){
    return ElMessage({
      message:'未查询到该用户',
      type:'error'
    })
  } else if(res.code === 400){
    return ElMessage({
      message:'审批失败',
      type:'error'
    })
  } else if(res.code === 200){
    await getUserList()
    return ElMessage({
      message:'审批成功',
      type:'success'
    })
  }
}
</script>

<style scoped lang="less">
.manage-box{
  width: 84%;
  height: 75%;
  padding: 5vh 10vh;
  border: 1px solid lightgray;
  margin-left: 2vw;
  margin-top: 2vh;
  border-radius: 10px;
  background-color: #fafafa;
  box-shadow: 0 0 10px 3px lightgray;
  .demo-ruleForm{
    .el-form-item{
      font-size: 2vh;
    }
  }
}
</style>
